<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>
		<style type="text/css">
			.membermain{
				width: 100%;
				padding: 2%;
				background-color: white;
			}
			
			.place button{
				width:100%;
				color: #676664 !important;
			    border: 0 !important;
			    padding: 11px 15px;
			 	text-align: right;
			}
			.place{
			}
			.inpr{
				text-align: right;
			}
			.mui-input-row .mui-btn {
			    float: right;
			    width: 60%;
			    padding: 11px 15px;
			}
			.borbot{
				border-bottom: 1px solid #BBBBBB;
			}
			.name>div,.content>div,.footbz>div{
				padding: 2px;
			}
			.name,.content,.footbz{
				padding: 5px 0;
			}
			.headerdiv{
				display: flex;
				align-content: center;
				justify-content: center;
			}
			.headerdiv>.name{
				width: 70%;
			}
			.headerdiv>.headerimg{
				width: 30%;
			}
			.headerimg{
				max-width: 80%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.headerimg>img{
				width: 80%;
				border-radius: 50%;
			}
			.listdiv2 {
			    width: 100%;
			    height: 60vh;
			    overflow: hidden;
			    overflow-y: auto;
			    background-color: white;
			}
			.listwai{
				position: relative;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">新增会员</h1>
		    <div class="ic mui-icon-right-nav mui-pull-right" id="adddiv">保存</div>
		</header>
		<div class="mui-content">
		    <div class="membermain">
		    	<div class="headerdiv">
			    	<div class="name">
			    		<div class="mui-input-row borbot">
			    		    <label>卡号</label>
			    		    <input id="card_number" type="text" class="inpr" placeholder="请输入卡号（必填）">
			    		</div>
			    		<div class="mui-input-row">
			    		    <label>姓名</label>
			    		    <input id="username" type="text" class="inpr" placeholder="请输入会员姓名（必填）">
			    		</div>
			    	</div>
			    	<div class="headerimg">
			    		<img id="memberimg" src="../images/user-photo.png"/>
			    	</div>
		    	</div>
		    	<div class="content">
		    		<div class="mui-input-row borbot" >
		    			<label>等级</label>
			    		<div class="place items" >
						    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">等级选择</button>
						</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>手机号码</label>
		    		    <input id="phone" type="text" class="inpr" placeholder="请输入手机号">
		    		</div>
		    		<div class="mui-input-row borbot">
		    			<label>性别</label>
			    		<div class="place items" >
						    <button id='gender' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">默认保密</button>
						</div>
		    		</div>
		    		
		    		<div class="mui-input-row borbot">
		    			<label>生日</label>
			    		<div class="place items" >
						    <button id='birthday' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">日期选择</button>
						</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>身份证号</label>
		    		    <input id="id_card" type="text" class="inpr" placeholder="请输入身份证">
		    		</div>
		    		<div class="mui-input-row">
		    		    <label>车牌号</label>
		    		    <input id="plate_number" type="text" class="inpr" placeholder="请输入身车牌号">
		    		</div>
		    		
		    		<div class="mui-input-row borbot">
		    			<label>地区</label>
			    		<div class="place items">
						    <button id='address' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">地区选择</button>
						</div>
		    		</div>
		    		<div class="mui-input-row borbot">
		    		    <label>详细地址</label>
		    		    <input id="addressinp" type="text" class="inpr" placeholder="请输入详细地址">
		    		</div>
		    		
		    		<div class="mui-input-row">
		    		    <label>推荐人</label>
		    		    <div class="place items">
						    <button id='recommend' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">推荐人选择</button>
						</div>
						<!--
                        	作者：592176224@qq.com
                        	时间：2019-01-14
                        	描述：
		    		    <input type="text" class="inpr" placeholder="请输入推荐人姓名">
                        -->
		    		</div>
		    	</div>
		    	
		    	<div class="footbz">
		    		<div class="mui-input-row">
		    		    <label>备注</label>
		    		    <input id="remark" type="text" class="inpr" maxlength="50" placeholder="限制50字内">
		    		</div>
		    	</div>
		    </div>
		    
		    <div id="popover" class="mui-popover">
			   <div class="listdiv2">
			   		<div class="ssdiv">
			   			<div id="typenum" class="ssdivleft">卡号</div>
			   			<input id="keyvalue" type="" name="" id="" value="" placeholder="输入卡号/电话/会员昵称"/>
			   			<div class="ssdivright hbg" onclick="recharge()">搜索</div>
			   		</div>
			   		<div class="listwai">
			   			
			   		
			   		<div id="scroll" class="mui-scroll-wrapper">  
					<div class="mui-scroll">  
					
			   		<div class="listdivmain" id="listdivmain">
			   			<!--
                           	作者：592176224@qq.com
                           	时间：2019-02-15
                           	描述：静态测试数据
                         
			   			<div class="fe09">
			   				<div class="">
			   					<span id="">
			   					昵称
			   				</span>
			   				<span id="">
			   					13625556555
			   				</span>	
			   				</div>
			   				<div class="">
			   					<span id="">
			   						卡号：
			   					</span>
			   					<span id="">
			   						15616516516156
			   					</span>
			   				</div>		   			
			   			</div>
			   			
			   			<ul class="mui-table-view">
			   			      <li class="mui-table-view-cell mui-media">
			   			          <a href="javascript:;">
			   			              <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
			   			              <div class="mui-media-body">
			   			                  幸福
			   			                  <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
			   			              </div>
			   			          </a>
			   			      </li>
			   			  </ul>
			   			  -->
			   			  </div>
			   			  </div>  
					</div> 
			   			</div>
			   		</div>
			   </div>
			</div>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/camera.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var levelnum = 1,gendernum = 0,recommend_id = 0,typenums = 1,images_id = 0,images_path="";
			var province="",city="",area="",page=null;
			window.onload = function(){
				mui.plusReady(function(){
					
					//监听拍照
					g("memberimg").addEventListener("tap",function(e){
						page.imgUp();    
					})
					page={  
		                imgUp:function(){  
		                    var m=this;  
		                    plus.nativeUI.actionSheet({cancel:"取消",buttons:[  
		                        {title:"拍照"},  
		                        {title:"从相册中选择"}  
		                    ]}, function(e){//1 是拍照  2 从相册中选择  
		                        switch(e.index){  
		                            case 1:appendByCamera(function(res){cutimage(res);});break;
		                            case 2:appendByGalleryone(function(res){cutimage(res);});break;
		                        }  
		                    });  
		                }  
		                //摄像头  
		            } 
				})
				
				mui.ready(function() {
					//设置等级
					var data1 = {
						url:"/api/member_level/lst",
						data:{access_token:acctoken()}
					}
					ajax(data1,function(res){
						console.log("等级列表",res)
						var list1 = [];
						for(var i = 0; i < res.data.data.length; i++){
							var str = {value:res.data.data[i].id,text:res.data.data[i].member_level}
							list1.push(str);
						}
						var levelPicker = new mui.PopPicker();
		                levelPicker.setData(list1);
		                var level = document.getElementById('level');
		                level.addEventListener('tap', function(event) {
		                    levelPicker.show(function(items) {
		                        level.innerText = items[0].text;
		                        levelnum = items[0].value;
		                        console.log(levelnum);
		                    });
		                }, false);
					})
					
                
                //设置性别
                var genderPicker = new mui.PopPicker();
                genderPicker.setData([{
                    value: 0,
                    text: '保密'
                },{
                    value: 1,
                    text: '男'
                }, {
                    value: 2,
                    text: '女'
                }]);
                var gender = document.getElementById('gender');
                gender.addEventListener('tap', function(event) {
                    genderPicker.show(function(items) {
                        gender.innerText = items[0].text;
                        gendernum = items[0].value;
                    });
                }, false);
                
                
                //设置条件
                 var typenumPicker = new mui.PopPicker();
                typenumPicker.setData([{
                    value: '1',
                    text: '手机号'
                },{
                    value: '2',
                    text: '会员卡号'
                }, {
                    value: '3',
                    text: '会员姓名'
                }]);
                 var typenum = document.getElementById('typenum');
                typenum.addEventListener('tap', function(event) {
                    typenumPicker.show(function(items) {
                        typenum.innerText = items[0].text;
                        typenums = items[0].value;
                    });
                }, false);
                
                
                
                //设置生日选择
                 var timedata = get_time();
                var birthday = document.getElementById('birthday');
                birthday.addEventListener('tap', function(event) {
                	var birthdayPicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(1950, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(timedata.Y, timedata.M-1, timedata.D, timedata.h, timedata.m),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    birthdayPicker.show(function(e) {
                    	 birthday.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
         
         
         		//设置地址
                var addressPicker = new mui.PopPicker({
                    layer: 3
                });
                addressPicker.setData(cityData3);
                var address = document.getElementById('address');
                address.addEventListener('tap', function(event) {
                    addressPicker.show(function(items) {
                        address.innerText = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                    	province = (items[0] || {}).text;
                    	city = (items[1] || {}).text;
                    	area = (items[2] || {}).text;
                    });
                }, false);
                
                //选择推荐人
                g("recommend").addEventListener('tap',function(e){
                	
                	mui('#popover').popover('toggle',document.getElementById("popover"));
                })
            });
				
				//监听 保存
				g("adddiv").addEventListener('tap',function(e){
					//g("card_number").value
					//g("username").value
					var plstr = g("plate_number").value;
					var phstr = g("phone").value;
					var cardstr = g("id_card").value;
					if((phstr!=""&&!phone(phstr)) ||(cardstr!=""&&!card(cardstr)) ||(plstr!=""&&!plate_number(plstr))){
						return;
					}else{
						addmember();
					}
				})
				
				
				getmember();
				mui('#scroll').scroll();  
			}
			
			function getmember(){
				var data = {
					url:"/api/member/lst",
					data:{
						access_token:acctoken(),
						page:1,
						per_page:25
					}
				}
				ajax(data,function(res){
					console.log("会员列表",res)
					setmember(res.data.data);
				})
			}
			
			function recharge(){
				
				var data = {
					url:"/api/member/search",
					data:{
						access_token:acctoken(),
						key:g("keyvalue").value,
						type:typenums
					}
				}
				ajax(data,function(res){
					console.log(res)
					setmember(res);
				})
			}
			
			function setmember(list){
				var str = '<ul class="mui-table-view">';
				var listdivmain = g("listdivmain");
				for(var i = 0; i < list.length;i++){
			   			str += '<li class="mui-table-view-cell mui-media" '+
			   			'onclick="setmemberid('+list[i].id+',\''+list[i].username+'\')">'+
			   			'<a href="javascript:;">'+
			   			    '<img class="mui-media-object mui-pull-left border50" src="';
			   			    if(list[i].headimg.length>40){
			   			    	str += list[i].headimg
			   			    }else{
			   			    	str += '../images/user-photo.png';
			   			    }
			   			    str += '">'+
			   			    '<div class="mui-media-body">'+
			   			    list[i].username+
			   			    '<p class="mui-ellipsis">'+
			   			    list[i].phone+' | '+list[i].card_number+
			   			    '</p></div></a></li>';
				}
				str += '</ul>';
				listdivmain.innerHTML = str;
			}
			
			function setmemberid(id,name){
				recommend_id = id;
				g("recommend").innerHTML = name;
				mui('#popover').popover('hide');
			}
			
			//添加会员
			function addmember(){
				var data = {
					url:"/api/member/add",
					data:{
						access_token:acctoken()||"",
						card_number:g("card_number").value,
						username:g("username").value,
						images_id:images_id||"",
						level_id:parseInt(levelnum),
						phone:g("phone").value||"",
						sex:parseInt(gendernum),
						birthday:g('birthday').innerText=="日期选择"?"":g('birthday').innerText,
						id_card:g("id_card").value||"",
						plate_number:g("plate_number").value||"",
						province:province||"",
						city:city||"",
						area:area||"",
						address:g("addressinp").value||"",
						recommend_id:recommend_id==0?"":recommend_id,
						remark:g("remark").value||""
					}
				}
				ajax(data,function(res){
					mui.toast(res.msg);
					mui.back();
					/*g("card_number").value = "";
					g("username").value = "";
					levelnum = 1;
					g("phone").value = "",
					gendernum = 0;
					g('birthday').innerText = "日期选择";
					g("id_card").value = "";
					province = "";
					city = "";
					area = "";
					g("addressinp").value = "";
					recommend_id = 0;
					g("remark").value = "";
					g("level").innerText = "等级选择";
					g("recommend").innerText = "推荐人选择";
					g("memberimg").src = "../images/user-photo.png";*/
				})
			}
			
			
			window.addEventListener("updateimg", updateimg); //添加自定义事件，其他页面调用
			
			 function updateimg(e) {
                	var imgurl = e.detail.img;
                	getBase64Image(imgurl,function(res){
                		console.log(res.dataURL);
                		console.log(res.dataURL.length);
	                	var data = {
	                		url:'/api/upload/image_base64',
	                		data:{
	                			access_token:acctoken(),
	                			images:res.dataURL
	                		}
	                	}
			                ajax(data,function(res){
			                	console.log( hurl +"/uploads/images/"+ res.data.name)
			                	g("memberimg").src = hurl +'/uploads/images/'+ res.data.name;
			                	images_id = res.data.images_id;
			                	images_path = res.data.name;
			                })
	                })
                }
			function cutimage(path) {
            	console.log(path);
            		var list = {
            			 path: path,
                         //bmtype:300/240,
                         pageid:"addmembers",
                         returnfun:"updateimg"
            		}
                    mui.openWindow({
                        url: '../general/cropper.html',
                        id: 'cropper',
                        extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                }
			
			
			function card(cardid){
				if(!(/^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/.test(cardid))){
					mui.toast("身份证号有误，请重新输入");
					return false;
				}else{
					return true;
				}
			}
			function phone(phone){
				if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))){ 
					mui.toast("手机号码有误，请重新输入"); 
					return false;
				}else{
					return true;
				}
			}
			
			function plate_number(str){
				if (str.length == 7){
			        var express = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
			        if(!express.test(str)){
			        	mui.toast("车牌号有误，请重新输入"); 
			        }else{
			        	return true;
			        }
			    }else{
			    	mui.toast("车牌号有误，请重新输入"); 
			    	return false;
			    }
			}
		</script>
	</body>

</html>